<!-- 用户赛事列表 -->
<template>
  <div
    class="
      alarm-record
      flex flex-direction
      strut-absolute
      margin-top-xl
      padding-lr-xl padding-bottom-xs
    "
  >
  <el-form inline="inline" v-model="searchParam">
    <el-form-item label="赛事板块" style="margin-left:2%">
      <el-select v-model="searchParam.contestSpeciesId">
        <el-option
        v-for="item in speciesList"
        :key="item.id"
        :label="item.name"
        :value="item.id"
        >
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="赛事分类" style="margin-left:4%">
      <el-select v-model="searchParam.status">
        <el-option
        v-for="item in sortList"
        :key="item.code"
        :label="item.status"
        :value="item.code">
        </el-option>
      </el-select>
    </el-form-item>
    <el-button type="primary" icon="el-icon-search"
  style="margin-left:18%" @click="getContestList">
  查询
      </el-button>
      <el-button type="primary" plain icon="el-icon-refresh"
  style="margin-left:2%" @click="reset">
  重置
      </el-button>
  </el-form>
  
   <el-table style="width: auto;"
   :data="data"
   border
   >
   <el-table-column label="赛事名称" align="center" width="250px"
      prop="name">
    <template slot-scope="scope">
      <el-button type="text" @click="openDetailDialog(scope.row)">
        {{ scope.row.name }}
      </el-button>
    </template>
    </el-table-column>
      <el-table-column label="赛事板块" align="center" width="150"
      prop="speciesId">
      <template slot-scope="scope">
        {{speciesMappingToName(scope.row.speciesId)}}
      </template>
    </el-table-column>
      <el-table-column label="参赛队伍数量" align="center" width="140"
      prop="">
      <template slot-scope="scope">
        <el-button type="text" @click="teamDetail(scope.row.id)">
        {{ scope.row.teamNumber }}
      </el-button>
      </template>
     
    </el-table-column>
      <el-table-column label="赛事开始时间" align="center"
      prop="startDate">
 
    </el-table-column>
      <el-table-column label="赛事结束时间" align="center" 
      prop="endDate">
   </el-table-column>
   <el-table-column label="操作" align="center">
    <template slot-scope="scope">
      <el-button type="primary" @click="openCreateTeamDialog(scope.row.id)">创建队伍</el-button>
      <el-button type="primary" @click="viewEvent(scope.row.id)">查看公告</el-button>
      <!-- <el-button type="primary" @click="viewEvent()">查看公告</el-button> -->
    </template>
       
      </el-table-column>
   </el-table>

   <!-- 赛事详情弹窗 -->
<el-dialog
    :visible.sync="detailContestVisible" >
    <el-form :model="detailContest" >
      <el-form inline="inline" style="margin-top:-40px;margin-bottom: -40px;">
        <el-form-item>
          <span><h1>{{  detailContest.name }}</h1></span>
        </el-form-item> 
        <el-form-item style="float:right;">
          <el-button v-if="this.currentTeamname == ''"
          type="primary" style="margin-top:20px; margin-right:30px"
          @click="teamDetail(detailContest.id)"
          >
            参加比赛
          </el-button>
          <span>
            <h3 v-if="this.currentTeamname != ''" >
                当前所在队伍:
                <el-button type="text" @click="getTeamInfo(currentTeamId)">
                  <h3>
                  {{ this.currentTeamname }}
                  </h3>
                </el-button>
            </h3>
          </span>
        </el-form-item>
      </el-form>
      <el-form inline="inline" style="margin-top:-40px;margin-bottom: -40px; margin-right: 0px;">
        <el-form-item >
          <span>
            <h3>
              板块: {{ speciesName }}
            </h3>
          </span>
        </el-form-item>
        <el-form-item style="float: right;">
          <span><h3>赛事时间：{{ detailContest.startDate }} - {{ detailContest.endDate }}</h3></span>
        </el-form-item>
      </el-form>
      <el-form-item>
        <span>
          <h3 style="margin-top:0px;margin-bottom: 0px;">
            说明:
          </h3>
          <h3 style="margin-top:0px">
            &nbsp;&nbsp;{{ detailContest.info }}
          </h3>
        </span>
      </el-form-item>
    </el-form>
    </el-dialog>
    <!-- 创建队伍 -->
    <el-dialog
    style="margin-left: 30%;width: 40%;"
    :visible.sync="createTeamVisible">
      <el-form inline="inline" v-model="createTeamParam">
        <el-form-item label="队伍名称">
          <el-input v-model="createTeamParam.name">
          </el-input>
        </el-form-item>
        <el-form-item label="队伍介绍">
          <el-input type="textarea"
          v-model="createTeamParam.info">
          </el-input>
        </el-form-item>
        <el-form-item label="队伍需求">
          <el-input type="textarea" v-model="createTeamParam.demand">
          </el-input>
        </el-form-item>
          <el-button style="width: 30%;" @click="cancelCreateTeam">取消</el-button>
          <el-button style="margin-left: 20%;" type="primary" @click="createTeam">立即创建</el-button>
      </el-form>
    </el-dialog>

    <!-- 参赛队伍列表 -->
    <el-dialog :visible.sync="teamListVisible" title="参赛队伍详情">
      <span>
        <h3 v-if="currentTeamname == ''">您尚未加入队伍</h3>
        <h3 v-if="currentTeamname != ''">您已加入队伍: {{ currentTeamname }}</h3>
      </span>
      <el-table border :data="teamList">
        <el-table-column label="队伍名称" prop="teamName"></el-table-column>
        <el-table-column label="队长姓名" prop="captainName"></el-table-column>
        <el-table-column label="队伍描述" prop="teamInfo"></el-table-column>
        <el-table-column label="队伍需求" prop="teamDemand"></el-table-column>
        <el-table-column label="操作"  align="center">
          <template slot-scope="scope">
            <el-button type="primary" @click="openJoinDialog(scope.row.teamId)">
              加入
            </el-button>
          </template>
         
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog title="加入队伍" :visible.sync="joinTeamVisible">
      <el-form>
        <el-form-item label="入队宣言：">
          <el-input  v-model="joinNote"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="cancelJoinTeam">取消</el-button>
          <el-button type="primary" @click="joinTeam">加入</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
import { getContestList ,getContestSpeciesList,createTeam,getTeamInfoList,joinTeam, getTeamNumber,getTeamName} from '@/api/eventSection';
export default {

  data() {
    return {
      data: [],
      sort:'',
      sortList:[{code:0,status:'进行中'},{code:1,status:'已截止'}],
      searchParam:{
        contestSpeciesId:'',
        status:0
      },
      speciesList:[],
      speciesName: "",
      currentJoinTeamId: "",
      joinNote: "",
      detailContestVisible: false,
      joinTeamVisible: false,
      createTeamVisible:false,
      teamListVisible:false,
      createTeamContestId:'',
      teamList:[],
      detailContest:{
        id:'',
        name:'',
        speciesId:'',
        info:'',
        startDate:'',
        endDate:''
      },
      createTeamParam:{
        name:'',
        info:'',
        demand:'',
      },
      userId:JSON.parse(localStorage.getItem('userInfo')).id,
      userName:JSON.parse(localStorage.getItem('userInfo')).userNameg,
      toThere:'',
      currentContestId:'',
      currentTeamId: 0,
      currentTeamname:''
    }
  },
  methods: {
    cancelJoinTeam(){
      this.joinTeamVisible = false;
    },
    openJoinDialog(teamId){
      this.currentJoinTeamId = teamId;
      this.joinTeamVisible = true;
    },
    getTeamName(contestId){
      getTeamName({userId:this.userId,contestId:contestId}).then(res => {
        if(res.data.code === 200){
          this.currentTeamname = res.data.data.teamName;
          this.currentTeamId = res.data.data.teamId;
        }
      })
    },
    reset(){
      this.searchParam.contestSpeciesId = this.speciesList[0].id
      this.searchParam.status = 0
      this.getContestList()
    },
    viewEvent(contestId){
      this.$router.push({
              path:'view-event',  
              query:{
                contestId:contestId
              }
            })
    },
    joinTeam(){
      const data = {
        teamId:this.currentJoinTeamId,
        userId:this.userId,
        joinNote:this.joinNote
      }
      joinTeam(data).then(res => {
        if(res.data.code === 200){
          this.$message({
            message:res.data.msg,
            type:'success'
          })
          this.joinTeamVisible = false;
          this.teamListVisible = false
        }else{
          this.$message({
            message:res.data.msg,
            type:'error'
          })
        }
      })
    },
    cancelCreateTeam(){
      this.createTeamVisible = false
    },
    openCreateTeamDialog(contestId){
      this.createTeamVisible = true
      this.createTeamContestId = contestId
    },
    createTeam(){
      const params = {
        contestId:this.createTeamContestId,
        userId:this.userId,
        name:this.createTeamParam.name,
        info:this.createTeamParam.info,
        demand:this.createTeamParam.demand
      }
      createTeam(params).then(res => {
        if(res.data.code === 200){
          this.$message({
            message:res.data.msg,
            type:'success'
          })
          this.createTeamVisible = false
        }else{
          this.$message({
            message:res.data.msg,
            type:'error'
          })
        }
      })
    },
    teamDetail(contestId){
      this.getTeamName(contestId);
      getTeamInfoList({contestId:contestId}).then(res => {
        if(res.data.code === 200){
          this.teamList = res.data.data
          this.teamListVisible = true
        }else{
          this.$message({
            message:res.data.msg,
            type:'error'
          })
        }
      })
    },
    openDetailDialog(row){
      this.detailContestVisible = true
      this.speciesName = this.speciesMappingToName(row.speciesId)
      this.detailContest = row
      this.getTeamName(row.id);
    },
    async getContestSpeciesList() {
      await getContestSpeciesList().then(res => {
        if(res.data.code === 200){
          this.speciesList = res.data.data
          if(this.toThere == undefined || this.toThere == null || this.toThere == ''){
            this.searchParam.contestSpeciesId = this.speciesList[0].id
          }else{
            this.searchParam.contestSpeciesId = this.toThere
          }
        }else {
          this.$message({
            message: res.data.msg,
            type: 'error'
          })
        }        
      })
    },
    async getContestList(){
      await getContestList(this.searchParam).then(res =>{
        if(res.data.code === 200){
          this.data = res.data.data
        }else {
          this.$message({
            message: res.data.msg,
            type:'error'
          })
        }
      })
    },
    speciesMappingToName(speciesId){
      const exist = this.speciesList.find(it=>it.id===speciesId)
      if(exist){
        return exist.name
      }else{
        return null
      }
    },
    async init(){
      await this.getContestSpeciesList()
      await this.getContestList()
    },
  },
  watch: {

  },
   mounted() {
    if(this.$route.query.contestSpeciesId != undefined && this.$route.query.contestSpeciesId != null && this.$route.query.contestSpeciesId != ''){
      this.toThere =  this.$route.query.contestSpeciesId
    }
    this.init()
  }
}
</script>

<style scoped>
.input_text_inner >>> .el-textarea__inner{
  display: inline-block;
  height: 200px;
}
.content_width >>> .el-form-item{
  width: 100%;
}
</style>
